<template>
    <div class="project">
    <Breadcrumb :menulist="[`${componentType == 1 ? '项目' : '产品'}`, '解决方案']" :componentType="componentType"></Breadcrumb>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="tabHeader">
        <el-button class="addPro" icon="el-icon-circle-plus" type="primary" @click="showAddPro">{{componentType == 1 ? '添加项目解决方案' : '添加产品解决方案'}}</el-button>
      </div>
      <el-table
          :data="tableData"
          max-height="600"
          line-height="50"
          border
          :header-cell-style='headerStyle'
          >
          <!--
            <el-table-column
              prop="solutionId"
              label="解决方案ID"
              width="100"
              align="center">
          </el-table-column>
          -->
          <el-table-column
              prop="solutionCode"
              label="解决方案编码"
              width="200"
              align="center">
          </el-table-column>
          <el-table-column
              prop="solutionName"
              align="center"
              width="200"
              label="解决方案名称">
          </el-table-column>
          <el-table-column
              prop="solutionType"
              align="center"
              width="100"
              label="解决方案类型">
              <template slot-scope="scope">
                <span>{{scope.row.solutionType.code == '1' ? '项目' : '产品'}}</span>
              </template>
          </el-table-column>
          <!--
                    <el-table-column
              prop="version"
              align="center"
              width="100"
              label="解决方案版本">
          </el-table-column>
          -->
          <el-table-column
              prop="dataSourceName"
              align="center"
              width="200"
              label="实体库数据源">
          </el-table-column>
          <el-table-column
              prop="productSolutionName"
              align="center"
              width="200"
              label="所属产品解决方案">
              <template slot-scope="scope">
                  <span class="dataFont">{{scope.row.productSolutionName ? scope.row.productSolutionName : '-'}}</span>&nbsp;&nbsp;
              </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              align="center"
              width="100"
              label="创建时间">
          </el-table-column>
          <el-table-column
              prop="createUserName"
              align="center"
              width="100"
              label="创建用户">
          </el-table-column>
          <el-table-column
              prop="modifyTime"
              align="center"
              width="100"
              label="修改时间">
          </el-table-column>
          <el-table-column
              prop="modifyUserName"
              align="center"
              width="100"
              label="修改用户">
          </el-table-column>
          <el-table-column
              prop="description"
              align="center"
              width="100"
              label="描述">
          </el-table-column>
          <el-table-column
              prop="databaseName"
              align="center"
              width="300"
              label="操作">
              <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  <!--
                    <el-button size="mini" @click="handleImport(scope.$index, scope.row)">导入</el-button>
                    <el-button size="mini" @click="handleExport(scope.$index, scope.row)">导出</el-button>
                  -->
                  <el-button size="mini" style="margin-top: 10px;" @click="handleUpdete(scope.$index, scope.row)">更新实体库</el-button>
                  <el-button size="mini" style="margin-top: 10px;" @click="handleSyncdata(scope.$index, scope.row)">同步</el-button>
                  <el-button size="mini" style="margin-top: 10px;" @click="handleRelease(scope.$index, scope.row)">发布服务</el-button>
              </template>
          </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="slot, sizes, total, prev, pager, next, jumper"
        :total="total">
          <el-button icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getSolutionsList"></el-button>
      </el-pagination>
    </el-card>
 

    <!-- 添加项目解决方案 -->
    <el-dialog :title="dialogTitle"  :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="46%" @close="handleCancel('form')">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
       <el-form-item v-if="dialogTitle === (componentType == 1 ? '删除项目解决方案' : '删除产品解决方案')" label="删除提示信息">
          <div style="color: #d93a49;">{{deleteCheckContent}}</div>
        </el-form-item>

        <el-form-item label="解决方案编码"  prop="solutionCode">
          <el-input v-model="form.solutionCode" placeholder="请输入解决方案编码" :disabled="deleteDisabled || dialogTitle ==  (componentType == 1 ? '编辑项目解决方案' : '编辑产品解决方案')"></el-input>
        </el-form-item>
        <el-form-item label="解决方案名称" prop="solutionName">
          <el-input v-model="form.solutionName" placeholder="请输入解决方案名称" :disabled="deleteDisabled"></el-input>
        </el-form-item>
        <el-form-item label="解决方案类型"  prop="solutionTypeName">
          <el-input v-model="form.solutionTypeName" disabled></el-input>
        </el-form-item>
        <!--
        <el-form-item label="解决方案版本" prop="version">
          <el-input v-model="form.version" placeholder="请输入解决方案版本" :disabled="deleteDisabled"></el-input>
        </el-form-item>
        -->
        <el-form-item label="实体库数据源"  prop="dataSourceId">
          <el-select v-model="form.dataSourceId" placeholder="请选择数据源名称" @change="onChangeDataSource" style="width: 100%;" :disabled="deleteDisabled || dialogTitle == (componentType == 1 ? '编辑项目解决方案' : '编辑产品解决方案')">
            <template v-for="(item,index) in datasourcesArray">
              <el-option :label="item.dataSourceName" :value="item.dataSourceId"></el-option>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="所属产品" prop="productSolutionId" v-if="componentType == 1">
          <el-select v-model="form.productSolutionId" placeholder="请选择所属产品" style="width: 100%;" @change="changeProduct(form.productSolutionId)" :disabled="deleteDisabled || dialogTitle == (componentType == 1 ? '编辑项目解决方案' : '编辑产品解决方案')">
            <template v-for="(item,index) in solutionsSelect">
              <el-option :label="item.productSolutionName ? item.productSolutionName : '-'" :value="item.productSolutionId ? item.productSolutionId : '-'"></el-option>
            </template>
          </el-select>
        </el-form-item>

        <!--
          <el-form-item label="所属产品版本" prop="productSolutionVersion">
            <el-input v-model="form.productSolutionVersion" disabled></el-input>
          </el-form-item>
        -->
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" :disabled="deleteDisabled" placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="dialogTitle ===  (componentType == 1 ? '添加项目解决方案' : '添加产品解决方案')" @click="handleSave('form')">保 存</el-button>
        <el-button type="primary" v-if="dialogTitle === (componentType == 1 ? '编辑项目解决方案' : '编辑产品解决方案')" @click="__handleEdit('form')">保 存</el-button>
        <el-button type="primary" plain v-if="dialogTitle === (componentType == 1 ? '添加项目解决方案' : '添加产品解决方案')" @click="resetForm('form')">清 除</el-button>
        <el-button type="danger" plain v-if="dialogTitle === (componentType == 1 ? '删除项目解决方案' : '删除产品解决方案')" @click="__handleDelete('form')">删 除</el-button>
        <el-button @click="handleCancel('form')">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 更新实体库与发布服务 -->
    <el-dialog :title="serverTitle"  :visible.sync="dialogFormVisibleServer" :close-on-click-modal="false" width="46%" @close="handleCancel('formServer')">
      <el-form :model="form" :rules="rules" ref="formServer" label-width="120px">
        <el-form-item label="解决方案编码"  prop="solutionCode">
          <el-input v-model="form.solutionCode" placeholder="请输入解决方案编码" disabled></el-input>
        </el-form-item>
        <el-form-item label="解决方案名称" prop="solutionName">
          <el-input v-model="form.solutionName" placeholder="请输入解决方案名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="解决方案类型"  prop="solutionTypeName">
          <el-input v-model="form.solutionTypeName" disabled></el-input>
        </el-form-item>
        <!--
        <el-form-item label="解决方案版本" prop="version">
          <el-input v-model="form.version" placeholder="请输入解决方案版本" :disabled="deleteDisabled"></el-input>
        </el-form-item>
        -->
        <el-form-item label="实体库数据源"  prop="dataSourceId">
          <el-input v-model="form.dataSourceName" disabled></el-input>
        </el-form-item>

        <el-form-item label="所属产品" prop="productSolutionId" v-if="componentType == 1">
          <el-input v-model="form.productSolutionName" disabled></el-input>
        </el-form-item>

        <!--
          <el-form-item label="所属产品版本" prop="productSolutionVersion">
            <el-input v-model="form.productSolutionVersion" disabled></el-input>
          </el-form-item>
        -->
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" disabled placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="serverTitle ===  '更新实体库'" @click="__handleUpdete('formServer')">更新视图库</el-button>
        <el-button type="primary" v-if="serverTitle ===  '同步数据'" @click="__handleSyncdata('formServer')">同步数据</el-button>
        <el-button type="primary" v-if="serverTitle === '发布服务'" @click="__handleRelease('formServer')">发布服务</el-button>
        <el-button @click="handleCancelServer('formServer')">取 消</el-button>
      </div>
    </el-dialog>
    </div>
</template>


<script>
import {request, url} from "@/api/request";
import Breadcrumb from "@/components/Breadcrumb.vue";

export default {
  name: "project",
  components: {
    Breadcrumb
  },
  props: {
      componentType: {
          type: Number,
          default: 1,//1组件，2产品
      },
  },
  data() {
    return {
      headerStyle: {
        "line-height": "40px"
      },
      tableData: [],
      formLabelWidth: "100px",
      dialogFormVisible: false,
      form: {
        solutionId: "",
        solutionCode: "",
        solutionName: "",
        solutionType: this.componentType == 1 ? '1' : '0',
        solutionTypeName: this.componentType == 1 ? '项目' : '产品',
        dataSourceName: "",
        productSolutionId: "",
        productSolutionName: "",
        // productSolutionVersion: "",
        version: "",
        description: "",
        dataSourceId: "",
      },
      rules: {
        solutionCode: [
          { required: true, message: '请输入解决方案编码', trigger: 'change' },
        ],
        solutionName: [
          { required: true, message: '请输入解决方案名称', trigger: 'change' },
        ],
        dataSourceId: [
          { required: true, message: '请选择数据源名称', trigger: 'change' }
        ],
      },
      datasourcesArray: [],
      solutionsSelect: [],
      pageNum: 0,
      pageSize: 10,
      total: 0,
      dialogTitle: this.componentType == 1 ? '添加项目解决方案' : '添加产品解决方案',
      deleteDisabled: false,
      deleteCheckContent: "",

      serverTitle: '更新实体库',
      dialogFormVisibleServer: false,
    };
  },

  created() {
    this.getSolutionsList();
  },
  methods: {
    // 查询列表
    getSolutionsList() {
      let params = {
        currentPage: this.pageNum,
        rows: this.pageSize,
      }

      let type = 1;
      if (this.componentType != 1) {
        type = 0;
      }
      request(`${url.solutionsList}/${type}`,{
          method:'GET',
          data: params
      },res=>{
          this.tableData = res.data.list;
          this.pageNum = res.data.pageNum;
          // this.pageSize = res.data.pageSize;
          this.total = res.data.total;
      })
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getSolutionsList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getSolutionsList();
    },
    
    // 实体库数据源
    getDatasourcesSelect() {
      request(url.datasourcesSelect, {
          method:'GET',
          data: {}
      },res=>{
          this.datasourcesArray = res.data;
      })
    },

     // 所属产品
    getSolutionsSelect1() {
      request(`${url.solutionsSelect}/0`, {
          method:'GET',
          data: {}
      },res=>{
          this.solutionsSelect = res.data;
      })
    },

    changeProduct (value) {
      console.log(value)
      // let hasProduct =  this.solutionsSelect.find(item => item.productSolutionId === value);
      // this.form.productSolutionVersion = hasProduct.productSolutionVersion;
    },

    // 增
    showAddPro() {
      this.form.solutionId = '';
      this.form.solutionCode = '';
      this.form.solutionName = '';
      this.form.dataSourceId = '';
      this.form.version = '';
      this.form.description = '';

      this.dialogFormVisible = true;
      this.deleteDisabled = false;
      this.dialogTitle = this.componentType == 1 ? '添加项目解决方案' : '添加产品解决方案';
      this.getDatasourcesSelect();
      this.getSolutionsSelect1();
    },
    
    handleSave(formName) {
      console.log(this.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parmas = {
            dataSourceId: this.form.dataSourceId, //  数据源ID
            solutionCode: this.form.solutionCode, //  解决方案编码
            solutionType: this.form.solutionType, //  解决方案类型
            solutionName: this.form.solutionName, //  解决方案名称
            // version: Number(this.form.version), //  版本
            productSolutionId: this.form.productSolutionId, //  解决方案ID
            description: this.form.description
          };
          request(`${url.solutions}`, {
              method:'POST',
              data: parmas
          },res=>{
              console.log(res)
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.dialogFormVisible = false;
              this.getSolutionsList();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    handleCancel(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },

    handleCancelServer(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisibleServer = false;
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //编辑实体库数据源 
    onChangeDataSource(value) {
      console.log(value);
      this.form.dataSourceId = value;
    },

    handleUpdete(index, row) {
      console.log(row);

      this.serverTitle = '更新实体库';
      this.dialogFormVisibleServer = true;
      this.form.solutionId = row.solutionId;
      this.form.solutionCode = row.solutionCode;
      this.form.solutionName = row.solutionName;
      this.form.solutionTypeName = row.solutionType.code  == '1' ? '项目' : '产品';
      this.form.dataSourceId = row.dataSourceId;
      this.form.dataSourceName = row.dataSourceName;
      this.form.productSolutionId = row.productSolutionId;
      this.form.productSolutionName = row.productSolutionName;
      this.form.version = row.version;
      this.form.description = row.description;


    },

    __handleUpdete(formServer) {
      // let parmas = {
      //   updateLogPath: row.updateLogPath,
      //   isUpdatetProduct: row.isUpdatetProduct,
      //   isUpdateProject: row.isUpdateProject
      // }
      request(`${url.solutionsUpdate}/${this.form.solutionId}`, {
        method:'POST',
        data: {}
      },res=>{
        console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        });
        this.dialogFormVisibleServer = false;
        this.getSolutionsList();
      })

    },

    handleSyncdata(index, row) {
      console.log(row);
      this.serverTitle = '同步数据';
      this.dialogFormVisibleServer = true;
      this.form.solutionId = row.solutionId;
      this.form.solutionCode = row.solutionCode;
      this.form.solutionName = row.solutionName;
      this.form.solutionTypeName = row.solutionType.code  == '1' ? '项目' : '产品';
      this.form.dataSourceId = row.dataSourceId;
      this.form.dataSourceName = row.dataSourceName;
      this.form.productSolutionId = row.productSolutionId;
      this.form.productSolutionName = row.productSolutionName;
      this.form.version = row.version;
      this.form.description = row.description;


    },

    __handleSyncdata(formServer) {
      // let parmas = {
      //   updateLogPath: row.updateLogPath,
      //   isUpdatetProduct: row.isUpdatetProduct,
      //   isUpdateProject: row.isUpdateProject
      // }
      request(`${url.solutionsSyncdata}/${this.form.solutionId}`, {
        method:'POST',
        data: {}
      },res=>{
        console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        });
        this.dialogFormVisibleServer = false;
        this.getSolutionsList();
      })

    },

    handleRelease(index, row) {
      console.log(row);
      this.serverTitle = '发布服务';
      this.dialogFormVisibleServer = true;
      this.form.solutionId = row.solutionId;
      this.form.solutionCode = row.solutionCode;
      this.form.solutionName = row.solutionName;
      this.form.solutionTypeName = row.solutionType.code  == '1' ? '项目' : '产品';
      this.form.dataSourceId = row.dataSourceId;
      this.form.dataSourceName = row.dataSourceName;
      this.form.productSolutionId = row.productSolutionId;
      this.form.productSolutionName = row.productSolutionName;
      this.form.version = row.version;
      this.form.description = row.description;

    },


    __handleRelease(formServer) {
      // let parmas = {
      //   updateLogPath: row.updateLogPath,
      //   isUpdatetProduct: row.isUpdatetProduct,
      //   isUpdateProject: row.isUpdateProject
      // }
      request(`${url.solutionsPublish}/${this.form.solutionId}`, {
        method:'POST',
        data: {}
      },res=>{
        console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        });
        this.dialogFormVisibleServer = false;
        this.getSolutionsList();
      })

    },

    // 编辑
    handleEdit(index, row) {
      console.log(index);
      console.log(row);
      this.dialogTitle = this.componentType == 1 ? '编辑项目解决方案' : '编辑产品解决方案';
      this.deleteDisabled = false;
      this.dialogFormVisible = true;
      this.form.solutionId = row.solutionId;
      this.form.solutionCode = row.solutionCode;
      this.form.solutionName = row.solutionName;
      this.form.solutionTypeName = row.solutionType.code  == '1' ? '项目' : '产品';
      this.form.dataSourceId = row.dataSourceId;
      this.form.productSolutionId = row.productSolutionId;
      this.form.productSolutionName = row.productSolutionName;
      this.form.version = row.version;
      this.form.description = row.description;
      this.getDatasourcesSelect();
      this.getSolutionsSelect1();
    },

    __handleEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)
          let parmas = {
            solutionId: this.form.solutionId,
            dataSourceId: this.form.dataSourceId, //  数据源ID
            solutionCode: this.form.solutionCode, //  解决方案编码
            solutionType: this.form.solutionType, //  解决方案类型
            solutionName: this.form.solutionName, //  解决方案名称
            version: this.form.version, //  版本
            description: this.form.description,
            productSolutionId: this.form.productSolutionId
          };
          request(`${url.solutions}/${this.form.solutionId}`, {
              method:'PUT',
              data: parmas
          },res=>{
              console.log(res)
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.dialogFormVisible = false;
              this.$refs[formName].resetFields();
              this.getSolutionsList();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 删除
    handleDelete (index, row) {
      console.log(row)
      this.dialogTitle = this.componentType == 1 ? '删除项目解决方案' : '删除产品解决方案';
      this.deleteDisabled = true;
      this.dialogFormVisible = true;
      this.form.solutionId = row.solutionId;
      this.form.solutionCode = row.solutionCode;
      this.form.solutionName = row.solutionName;
      this.form.solutionTypeName = row.solutionType.code  == '1' ? '项目' : '产品';
      this.form.dataSourceId = row.dataSourceId;
      this.form.productSolutionId = row.productSolutionId;
      this.form.productSolutionName = row.productSolutionName;
      this.form.version = row.version;
      this.form.description = row.description;
      this.deleteCheck(row.solutionId);
    },

    deleteCheck(solutionId) {
      request(`${url.solutionsCheck}/${solutionId}`, {
          method:'GET',
          data: {}
      },res=>{
          console.log(res)
          this.deleteCheckContent = res.data + res.message;
      })
    },

    __handleDelete (formName) {
      let solutionId = this.form.solutionId;
      request(`${url.solutions}/${solutionId}`, {
          method:'DELETE',
          data: {}
      },res=>{
          this.dialogFormVisible = false;
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.$refs[formName].resetFields();
          this.getSolutionsList();
      })
    }
  },



};
</script>

<style scoped>



</style>
